//
//  ContentView.swift
//  MyAnimationDemo
//
//  Created by liy on 2025/2/10.
//

import SwiftUI

struct ContentView: View {
  var body: some View {
		List() {
			OffsetNoView().frame(height: 200)
      ScaleNoAniView().frame(height: 200)
      RotateNoAniView().frame(height: 200)
      ScaleRotateAniView().frame(height: 200)
    }
	
  }
}

struct ScaleNoAniView: View {
  @State private var scale: CGFloat = 1.0
  var body: some View {
    Button(action: {
      scale = scale == 1.0 ? 2.0 : 1.0
    }) {
      Text("scaleNoAni")
        .scaleEffect(scale)
    }
  }
}

struct RotateNoAniView: View {
  @State private var rotationAngle: Angle = .degrees(0)
  var body: some View {
    Button(action: {
      rotationAngle = rotationAngle == .degrees(0) ? .degrees(90) : .degrees(0)
    }) {
      Text("Rotate Me")
        .rotationEffect(rotationAngle)
    }
  }
}
struct OffsetNoView: View {
	@State private var offsetX: CGFloat = 0
	@State private var offsetY: CGFloat = 0
	var body: some View {
		Button(action: {
			offsetX = 100
			offsetY = 50
		}) {
			Text("MoveNoAni")
				.offset(x: offsetX, y: offsetY)
		}
	}
}
struct ScaleRotateAniView: View {
  @State private var scale: CGFloat = 1.0
  @State private var rotationAngle: Angle = .degrees(0)
	@State private var offsetX: CGFloat = 0
	@State private var offsetY: CGFloat = 0
  var body: some View {
    Button(action: {
      withAnimation(.easeInOut(duration: 1.0)) {
        scale = scale == 1.0 ? 2.0 : 1.0
        rotationAngle = rotationAngle == .degrees(0) ? .degrees(90) : .degrees(0)
				offsetX = offsetX == 0 ? 100 : 0
				offsetY = offsetY == 0 ? 50 : 0
      }
    }) {
      Text("scale + rotate + move")
        .scaleEffect(scale)
        .rotationEffect(rotationAngle)
				.offset(CGSize(width: offsetX, height: offsetY))
    }
  }
}

#Preview() {
  ContentView()
}
/**
 在 SwiftUI 中，用于实现视图平移操作的 API 是 `offset` 修饰符，下面为你详细介绍它的使用方式以及如何与动画联动。
 
 ### `offset` 修饰符介绍
 `offset` 修饰符可以将视图在水平（`x` 轴）和垂直（`y` 轴）方向上进行平移。它接受两个可选参数，分别表示在 `x` 轴和 `y` 轴上的偏移量，单位为点（points）。
 
 ### 基本使用示例
 ```swift
 import SwiftUI
 
 struct ContentView: View {
 @State private var offsetX: CGFloat = 0
 @State private var offsetY: CGFloat = 0
 
 var body: some View {
 Button(action: {
 offsetX = 100
 offsetY = 50
 }) {
 Text("Move Me")
 .offset(x: offsetX, y: offsetY)
 }
 }
 }
 ```
 在上述代码中，点击按钮会将 `Text` 视图在 `x` 轴方向上向右平移 100 点，在 `y` 轴方向上向下平移 50 点。
 
 ### 与 `animation` 联动
 和 `scaleEffect`、`rotationEffect` 一样，`offset` 也可以与 `animation` 联动，实现平滑的平移动画效果。
 
 #### 使用 `withAnimation`
 ```swift
 import SwiftUI
 
 struct ContentView: View {
 @State private var offsetX: CGFloat = 0
 @State private var offsetY: CGFloat = 0
 
 var body: some View {
 Button(action: {
 withAnimation(.easeInOut(duration: 1.0)) {
 offsetX = 100
 offsetY = 50
 }
 }) {
 Text("Animate Move")
 .offset(x: offsetX, y: offsetY)
 }
 }
 }
 ```
 这里点击按钮时，`withAnimation` 闭包内改变了 `offsetX` 和 `offsetY` 的值，`Text` 视图的平移操作会在 1 秒内以缓入缓出的动画效果完成。
 
 #### 使用 `.animation(_:value:)` 修饰符
 ```swift
 import SwiftUI
 
 struct ContentView: View {
 @State private var offsetX: CGFloat = 0
 @State private var offsetY: CGFloat = 0
 
 var body: some View {
 Button(action: {
 offsetX = 100
 offsetY = 50
 }) {
 Text("Animate Move")
 .offset(x: offsetX, y: offsetY)
 .animation(.spring(), value: offsetX)
 .animation(.spring(), value: offsetY)
 }
 }
 }
 ```
 在这个例子中，当 `offsetX` 或 `offsetY` 的值发生变化时，`Text` 视图会以弹簧动画的效果进行平移。
 
 ### 仅在一个轴上平移
 如果你只需要在一个轴上进行平移，也可以只传入一个偏移量参数。例如，只在 `x` 轴上平移：
 ```swift
 import SwiftUI
 
 struct ContentView: View {
 @State private var offsetX: CGFloat = 0
 
 var body: some View {
 Button(action: {
 withAnimation(.easeInOut(duration: 1.0)) {
 offsetX = 100
 }
 }) {
 Text("Move Horizontally")
 .offset(x: offsetX)
 }
 }
 }
 ```
 
 通过 `offset` 修饰符以及与 `animation` 的联动，你可以在 SwiftUI 中轻松实现视图的平移动画效果。 
 */
